<template>
  <div class="public_main">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>{{$t('sidebar.operator')}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{$t('popularizeList.crumbsOne')}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{$t('operatorManage.no1')}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
  <!-- ------------  搜索查询栏  -------------------- -->
  <search 
			:searchData="searchData" 
			@search="search" 
			:searchRight="true"
			:outputRight="false"
    ></search>
  
  <!-- ------------  消息发送  --------------------- -->
    <div class="list_operation" v-if="$store.state.common.permiss.manualmsg.includes('save')">
      <el-button 
        type="primary"
        @click="sendNote()">
        +{{$t('operatorManage.no6')}}
      </el-button>
    </div>

  <!-- ------------  优惠券列表  ------------------------ -->
    <div class="table" v-if="true">
      <template>
        <el-table :data="tableData" size="small" stripe>
          <el-table-column align="center" prop="id" :label="$t('operatorManage.no3')">
          </el-table-column>
          <el-table-column align="center" prop="sendTime" :label="$t('operatorManage.no5')">
          </el-table-column>
          <el-table-column align="center" prop="messageType" :label="$t('operatorManage.no4')">
            <template slot-scope="scope">
              <span>{{$t($store.getters.manual_sendStatus(scope.row.messageType))}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="sendType" :label="$t('operatorManage.no18')">
            <template slot-scope="scope">
              <span>{{$t($store.getters.sendTypeState(scope.row.sendType))}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="resolved" :label="$t('operatorManage.no7')">
          </el-table-column>
          <el-table-column align="center" prop="delivered" :label="$t('operatorManage.no8')">
          </el-table-column>
          <el-table-column align="center" prop="click" :label="$t('operatorManage.no9')">
          </el-table-column>
          <el-table-column align="center" prop="appPackage" :label="$t('public.appPackage')">
          </el-table-column>
          <el-table-column align="center" prop="operation" :label="$t('public.operation')" >
            <template slot-scope="scope" >
              <span class="table_opr" 
              @click="detail(scope.row)">{{$t('public.no29')}}</span>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>

  <!-- ------------  添加活动弹框  ------------------------ -->
    <el-dialog :title="$t('operatorManage.no6')" :visible.sync="dialogFormVisible"  width="850px">
      <h4>{{$t('operatorManage.no16')}}</h4>
      <el-form :model="form" size="small" :rules="rules" ref="ruleForm" label-width="140px">
        <el-form-item :label="$t('operatorManage.no4')" prop="messageType">
          <el-select size="small" v-model="form.messageType">
            <el-option v-for="item in option5" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('operatorManage.no18')" prop="sendType">
          <el-radio-group v-model="form.sendType">
            <el-radio :label="1">{{$t('operatorManage.sendType.no1')}}</el-radio>
            <el-radio :label="2">{{$t('operatorManage.sendType.no2')}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('operatorManage.no10')" prop="title">
          <el-input type="text" style="width:215px;" v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item :label="$t('operatorManage.no11')" prop="description">
          <el-input type="textarea" style="width:400px;" v-model="form.description" maxlength="600"></el-input>
        </el-form-item>
        <el-form-item :label="$t('operatorManage.no12')" prop="message">
          <el-input type="textarea" style="width:400px;" v-model="form.message" maxlength="600"></el-input>
        </el-form-item>
      </el-form>
      <h4 class="mb20">{{$t('operatorManage.no17')}} <span class="red">({{$t('add.no5')}})</span></h4>
      <div class="even" v-if="form.sendType==2">
        <el-form :inline="true" :model="evenForm" size="small" label-width="140px">
          <el-form-item :label="$t('public.appPackage')">
            <el-select v-model="evenForm.appPackage" :placeholder="$t('public.placeholder')">
            <el-option v-for="(item,index) in apkOptions" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
          </el-form-item>
          <el-form-item :label="$t('public.userSelfStatus')">
            <el-select v-model="evenForm.userStatus" :placeholder="$t('public.placeholder')">
              <el-option v-for="(item,index) in option2" :key="index" :label="$t(item.label)" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('public.approveStatus')">
            <el-select v-model="evenForm.isAuth" :placeholder="$t('public.placeholder')">
              <el-option v-for="(item,index) in option3" :key="index" :label="$t(item.label)" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('public.orderStatus')">
            <el-select v-model="evenForm.lastOrderStatus" :placeholder="$t('public.placeholder')">
              <el-option v-for="(item,index) in option4" :key="index" :label="$t(item.label)" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('operatorManage.no14')+'≥'" >
            <el-input type="text" style="width:215px;" v-model="evenForm.successfulLendings"></el-input>
          </el-form-item>
          <el-form-item :label="$t('operatorManage.no15')+'≤'" >
            <el-input type="text" style="width:215px;" v-model="evenForm.overDueDays"></el-input>
          </el-form-item>
          <el-form-item :label="$t('operatorManage.no25')">
            <el-date-picker 
              size="small"
              v-model="RefundTime" 
              type="daterange" 
              range-separator="~" 
              :default-value="$store.state.common.preMonth" 
              :start-placeholder="$t('public.beginTime')" 
              :end-placeholder="$t('public.endTime')">
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <div class="odd" v-if="form.sendType==1">
        <span >{{$t('public.userTel')}}</span>
        <el-input type="text" style="width:215px;" size="small" v-model="odd.phone"></el-input>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">{{$t('public.no50')}}</el-button>
        <el-button type="primary" @click="save">{{$t('public.no49')}}</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="$t('public.detail')" :visible.sync="dialogDetailVisible"  width="750px">
      <h4>{{$t('operatorManage.no16')}}</h4>
      <div class="left2right">
        <span class="left" style="width:120px">{{$t('operatorManage.no4')}}:</span>
        <div class="right">
          {{detailData.sendType==1?$t('operatorManage.sendType.no1'):$t('operatorManage.sendType.no2')}}
        </div>
      </div>
      <div class="left2right">
        <span class="left" style="width:120px">{{$t('operatorManage.no10')}}:</span>
        <div class="right">
          {{detailData.title}}
        </div>
      </div>
      <div class="left2right">
        <span class="left" style="width:120px">{{$t('operatorManage.no11')}}:</span>
        <div class="right">
          {{detailData.description}}
        </div>
      </div>
      <div class="left2right">
        <span class="left" style="width:120px">{{$t('operatorManage.no12')}}:</span>
        <div class="right">
          {{detailData.message}}
        </div>
      </div>
      <h4>{{$t('operatorManage.no18')}}</h4>
      <p class="detail_con" v-if="detailData.phone"><span>{{$t('public.userTel')}}:</span><span>{{detailData.phone}}</span></p>
      <p class="detail_con" v-if="detailData.packageName"><span>{{$t('new.no48')}}:</span><span>{{detailData.packageName}}</span></p>
      <p class="detail_con" v-if="detailData.userStatus"><span>{{$t('public.userSelfStatus')}}:</span><span>{{$t($store.getters.blackStatus(detailData.userStatus))}}</span></p>
      <p class="detail_con" v-if="detailData.isAuth"><span>{{$t('public.approveStatus')}}:</span><span>{{$t($store.getters.isAuth_Status(detailData.isAuth))}}</span></p>
      <p class="detail_con" v-if="detailData.lastOrderStatus"><span>{{$t('public.orderStatus')}}:</span><span>{{$t($store.getters.rejectStatus(detailData.lastOrderStatus))}}</span></p>
      <p class="detail_con" v-if="detailData.successfulLendings"><span>{{$t('operatorManage.no14')}}:</span><span>{{detailData.successfulLendings}}</span></p>
      <p class="detail_con" v-if="detailData.overDueDays"><span>{{$t('operatorManage.no15')}}:</span><span>{{detailData.overDueDays}}</span></p>
      <p class="detail_con" v-if="detailData.mustRefundTimeBegin"><span>{{$t('operatorManage.no15')}}:</span><span>{{detailData.mustRefundTimeBegin+'~'+detailData.mustRefundTimeEnd}}</span></p>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogDetailVisible = false">{{$t('public.no50')}}</el-button>
      </div>
    </el-dialog>
    
    <!-- ------------  分页   ------------------------ -->
    <el-row type="flex" justify="end">
      <div class="pages" >
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="pagination.current"
          layout="sizes, prev, pager, next, total,->"
          :page-sizes="pagination.pageSizeOptions"
          :page-size="pagination.pageSize"
          @size-change="handleSizeChange"
          :total="pagination.total">
        </el-pagination>
      </div>
    </el-row>

  </div>
</template>
<script>
import getApp from 'src/mixins/getApp.js';//导出excel
export default {
  name: 'ManualnotePut',
  mixins:[getApp],
  data () {
    const searchData=[
      {
        type: 'input',
        attr: 'messageId',
        label: 'operatorManage.no3',
      },{
        type: 'select',
        attr: 'deviceType',
        label: 'operatorManage.no4',
        option: this.$store.state.options.buildInSendDevice_options,
        value: '',
        langFlag: true,
      },{
        type: 'select',
        attr: 'sendType',
        label: 'operatorManage.no18',
        option: this.$store.state.options.sendTypeOption,
        value: '',
        langFlag: true,
      },{
        type: 'rangePicker',
        label: 'public.beginTime',
        attr: 'searchTime',
        value: [],
      },{
        type: 'select',
        attr: 'appPackage',
        label: 'public.appPackage',
        option: [],
        value: '',
        langFlag: false,
      }
    ]
    return {
      dialogFormVisible: false,
      dialogDetailVisible: false,
      formLabelWidth: '90px',
      pagination: {
        pageSize: global.config.pageSize,
        pageSizeOptions: global.config.pageSizeOptions,
        current: 1,
        total: 0,
      },
      tableData: [],
      searchData:searchData,
      RefundTime: [],
      filter: {
        messageId: '',
        sendType: '',
        sendTimeBegin: '',
        sendTimeEnd:'',
        messageType: '',
        appPackage:''
      },
      form: {
        sendType: '',
        title: '',
        description: '',
        message: '',
        messageType:''
      },
      couponTypeOption:  this.$store.state.options.couponType,
      apkOptions:[],// App包名
      option2:this.$store.state.options.operatorManage_blackStatus,
      option3:this.$store.state.options.operatorManage_approveStatus,
      option4:this.$store.state.options.operatorManage_orderStatus,
      option5:this.$store.state.options.buildInSendType_options,
      odd:{
        phone:''
      },
      evenForm:{
        appPackage:'',
        userStatus:'',
        isAuth:'',
        lastOrderStatus:'',
        successfulLendings:'',
        overDueDays:'',
        mustRefundTimeBegin:'',
        mustRefundTimeEnd:'',
      },
      detailData:{},
      rules:{
        messageType: [
          { required: true, message: this.$t('login.required'), trigger: 'change' }
        ],
        sendType: [
          { required: true, message: this.$t('login.required'), trigger: 'change' }
        ],
        title: [
          { required: true, message: this.$t('login.required'), trigger: 'change' }
        ],
        description: [
          { required: true, message: this.$t('login.required'), trigger: 'change' }
        ],
        message: [
          { required: true, message: this.$t('login.required'), trigger: 'change' }
        ],
      }
    }
  },
  mounted () {
    this.getTableData();
    this.getApp().then(app=>{
      app.appPackage.push({
        label:'ALL',
        value:'ALL'
      })
      this.searchData[4].option=app.appPackage;
      this.apkOptions=app.appPackage;
    })
  },
  methods: {
    handleSizeChange (val) {// 每页条数变化时操作
      this.pagination.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange (val) { // 分页按钮点击操作
      this.pagination.current = val;
      this.getTableData();
    },
    search (search) { // 点击查询按钮
      this.filter = search;
      this.filter.sendTimeBegin=search.searchTime?search.searchTime[0]:'';
      this.filter.sendTimeEnd=search.searchTime?search.searchTime[1]:'';
      this.pagination.currentPage = 1;
      this.getTableData();
    },
    getTableData () {
      let option = {
        pageNum:this.pagination.current,
        pageSize:this.pagination.pageSize,
        param: {
          ...this.filter
        }       
      }
      this.$axios.post(this.$action.operation_manualList, option).then(res => {
        if (res.code == 200) {
          let date = new Date();
          this.tableData = res.data.list;
          this.pagination.total = res.data.total;
        } else {
          this.$message.error(res.message);
        }
      })
    },
    sendNote () {
      this.odd = {
        phone:''
      },
      this.evenForm = {
        appPackage:'',
        userStatus:'',
        isAuth:'',
        lastOrderStatus:'',
        successfulLendings:'',
        overDueDays:'',
        mustRefundTimeBegin:'',
        mustRefundTimeEnd:'',
      },
      this.form = {
        messageType: '',
        sendType: '',
        title: '',
        description: '',
        message: '',
      },
      this.dialogFormVisible = true;
    },
    save () {// 消息发送确认操作
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.form.sendType==1&&this.odd.phone==='') return
          if (this.form.sendType==2&&!this.RefundTime.length&&this.evenForm.appPackage===''&&this.evenForm.userStatus===''&&this.evenForm.isAuth===''&&this.evenForm.lastOrderStatus===''&&this.evenForm.successfulLendings===''&&this.evenForm.overDueDays==='') return
          let option = {
            param: {
              ...this.form,
              ...this.evenForm,
              ...this.odd
            }       
          }
          this.$axios.post(this.$action.operation_manualSend, option).then(res => {
            if (res.code == 200) {
              this.$globalMsg.success(this.$t('message.success'));
              this.getTableData();
            }else{
              this.$globalMsg.error(res.message);
            }
          })
          this.dialogFormVisible = false;
          this.$refs.ruleForm.resetFields();
          this.RefundTime = []
        } else {
          return false;
        }
      })
    },
    detail(detailData){
      this.detailData = detailData;
      this.dialogDetailVisible = true;
    }
  },
  watch:{
    'form.sendType'(){
      if(this.form.sendType==1){
        this.evenForm.appPackage = '';
        this.evenForm.userStatus = '';
        this.evenForm.isAuth = '';
        this.evenForm.lastOrderStatus = '';
        this.evenForm.successfulLendings = '';
        this.evenForm.overDueDays = '';
        this.evenForm.mustRefundTimeBegin = ''
        this.evenForm.mustRefundTimeEnd = ''
      }else if(this.form.sendType==2){
        this.odd.phone = '';
      }
    },
    RefundTime(){
      if (this.RefundTime) {
        this.evenForm.mustRefundTimeBegin = this.$store.getters.yyyy_m_d(this.RefundTime[0]);
        this.evenForm.mustRefundTimeEnd = this.$store.getters.yyyy_m_d(this.RefundTime[1]);
      } else {
        this.evenForm.mustRefundTimeBegin = '';
        this.evenForm.mustRefundTimeEnd = '';
      }
    }
  }
}
</script>
<style scoped lang="scss">

  .odd{
    display: flex;
    span{
      display: block;
      width: 140px;
      text-align: right;
      padding-right: 12px;
    }
  }
  .detail_con{
    width: 100%;
    min-height: 40px;
    line-height: 40px;
    font-size: 16px;
    span:nth-child(1){
      padding-left: 50px;
      padding-right: 14px;
    }
  }
  .red{
    color: crimson;
    
  }
</style>
